<template>
    <!-- 寄件详情 -->
    <view class="detail-botx">
        <view class="number">
            <image class="home_icon_peis_nor" src="../../static/images/home_icon_peis_nor.png" mode=""></image>
            <view>
                <view>配送中</view>
                <view>运单号：3874123581</view>
            </view>
        </view>
        
        <view class="detail-item">
            <view class="tips">如暂无快递信息或对信息有疑问，请联系物流公司官方电话。</view>
            
            <template v-for="(item, i) in result">
                <view class="detail-d" v-if="i == 0">
                    <view class="icon">
                        <image class="home_icon_xz_z" src="../../static/images/home_icon_xz_z.png" mode=""></image>
                    </view>
                    <view class="line"></view>
                    <view class="info">
                        <view class="state1">已签收</view>
                        <view class="where-state1"> {{item.msg}} </view>
                        <view class="time"> {{item.date}} </view>
                    </view>
                </view>
                
                <view class="detail-d" v-else-if="i == (result.length - 1)">
                    <view class="icon icon-state0"></view>
                    <view class="info">
                        <view class="state0 last"> {{item.msg}} </view>
                        <view class="time"> {{item.date}} </view>
                    </view>
                </view>
                
                <view class="detail-d" v-else>
                    <view class="icon icon-state0"></view>
                    <view class="line line-state0"></view>
                    <view class="info">
                        <view class="state0">派送中</view>
                        <view class="where-state0"> {{item.msg}} </view>
                        <view class="time"> {{item.date}} </view>
                    </view>
                </view>
            </template>
            
            <!-- <view class="detail-d">
                <view class="icon">
                    <image class="home_icon_xz_z" src="../../static/images/home_icon_xz_z.png" mode=""></image>
                </view>
                <view class="line"></view>
                <view class="info">
                    <view class="state1">已签收</view>
                    <view class="where-state1">
                        您的订单已由本人签收，签收人<text class="how">【某某某】</text>
                    </view>
                    <view class="time">
                        2019-05-20  10:20:22
                    </view>
                </view>
            </view>
            <view class="detail-d">
                <view class="icon icon-state0"></view>
                <view class="line line-state0"></view>
                <view class="info">
                    <view class="state0">派送中</view>
                    <view class="where-state0">
                        您的订单正在配送中（配送员：徐徐徐，电话：<text class="how">15877777777</text>），请您耐心等待。
                    </view>
                    <view class="time">
                        2019-05-20  10:20:22
                    </view>
                </view>
            </view>
            <view class="detail-d">
                <view class="icon icon-state0"></view>
                <view class="line line-state0"></view>
                <view class="info">
                    <view class="state0">运输中</view>
                    <view class="where-state0">
                        您的订单已到达【东莞南城区】
                    </view>
                    <view class="time">
                        2019-05-20  10:20:22
                    </view>
                </view>
            </view>
            <view class="detail-d">
                <view class="icon icon-state0"></view>
                <view class="info">
                    <view class="state0 last">您的订单已从【东莞东城区】发出</view>
                    <view class="time">
                        2019-05-20  10:20:22
                    </view>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: '',
            waybillNum: '',
            result: ''
        }
    },
    watch:{},
    onLoad(p) {
        this.waybillNum = p.waybillNum
        uni.getStorage({
        	key: '$userInfo',
        	success: (d) => {
        		this.userInfo = d.data
                this.getWaybillState()
        	}
        })
        
    },
    methods: {
        getWaybillState(){
        	let token = this.userInfo.token
        	uni.showLoading();
        	this.app.apiAsync( `/dfApp/getWaybillState?waybillNum=${this.waybillNum}`, {}, "POST", token)
        	.then( r => {
        		r = r.data
        		uni.hideLoading();
        		if ( r.code == 200 ) {
        			this.result = r.result
        		} else {
                    this.app.toast(r.message)
                }
        	})
        },
    }
}
</script>

<style lang="less" scoped>
.detail-botx{}
.number{
    height: 150rpx;
    display: flex;
    align-items: center;
    padding: 0 44rpx;
    
    .home_icon_peis_nor{
        width: 63rpx;
        height: 60rpx;
        margin-right: 20rpx;
    }
}
.detail-item{
    width: 698rpx;
    margin: 0 26rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    
    .tips{
        height: 84rpx;
        line-height: 84rpx;
        border-bottom: 1rpx solid #dfdfdf;
        font-size: 24rpx;
        color: #999;
        text-align: center;
    }
    
    .detail-d{
        display: flex;
        align-items: flex-start;
        position: relative;
        padding: 40rpx 20rpx 0 20rpx;
        .icon{
            z-index: 999;
            margin-right: 20rpx;
            .home_icon_xz_z{
                width: 34rpx;
                height: 34rpx;
            }
            
            &.icon-state0{
                width: 16rpx;
                height: 16rpx;
                border-radius: 50%;
                background: #dfdfdf;
                margin-top: 10rpx;
                margin-left: 10rpx;
            }
        }
        .line{
            position: absolute;
            top: 75rpx;
            left: 37rpx;
            bottom: -54rpx;
            width: 1rpx;
            background: #dfdfdf;
            &.line-state0{
                top: 60rpx;
            }
        }
        &:last-child{
            .info{
                border-bottom: none
            }
        }
        .info{
            width: 100%;
            border-bottom: 1rpx solid #dfdfdf;
            padding-bottom: 40rpx;
            
            .state1{
                color: #f04545;
                font-size: 32rpx;
                line-height: 32rpx;
            }
            .state0{
                color: #999999;
                font-size: 32rpx;
                line-height: 32rpx;
                
                &.last{
                    font-size: 26rpx;
                }
            }
            .where-state1{
                color: #333;
                font-size: 26rpx;
                margin-top: 32rpx;
                .how{
                    color: #f04545;
                }
            }
            .where-state0{
                color: #999;
                font-size: 26rpx;
                margin-top: 32rpx;
                .how{
                    color: #f04545;
                }
            }
            .time{
                color: #999999;
                font-size: 26rpx;
                margin-top: 20rpx;
            }
        }
        
    }
}

.btns-box{
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    
    .btns{
        width: 600rpx;
        height: 80rpx;
        margin-left: 75rpx;
        border-radius: 20rpx;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f04545;
        color: #fff;
        
        &:active{
            background: #ef2b2b;
        }
    }
}
</style>
